
<style>
	@import "../../common/css/index.css";
</style>

<template>
	<view class="main">
		<!--顶部吸顶-->
		<!--搜索-->
		<tuiSticky 
		ref="tuiSticky"
		:scrollTop="scrollTop">
			<template v-slot:header>
				<view class="home_top_title" @click="select_map">
					<image src="../../static/dizhi.png" mode="aspectFit" class="address_img"></image>
					<span class="address_title">{{newAddress}}</span>
					<image src="../../static/reback.png" mode="aspectFit" class="reback"></image>
				</view>
				<view class="sticky-item" 
				v-if="goodsList.length > 0 && isShowSearchBtn"
				>
					<view class="sticky_header_search">
						<input type="text"  v-model="inputText" class="search_txt" />
						<view class="go_search_btn" @click="searchGoods(0)">搜索</view>
					</view>
				</view>
			</template>
			<template v-slot:content style="height: 100%;">
				<!--轮播附近门店+搜索-->
				<view class="home_main_content">
					<span class="home_main_title">附近门店</span>
					<cg-swiper :swiperList="swiperList" :swiperPage="swiperPage" @clickItem="clickItem" style="width: 100%;float: left;"></cg-swiper>
					<span class="buy_for_me">帮我购买</span>
					<view class="search_content">
						<textarea class="search_textarea" @focus="getFocus" @blur="getBlur" @input="changeVal"></textarea>
						<view
						v-if="is_search_tip"
						class="yes_display"
						>
							<image class="tip_icon" src="../../static/edit.png" mode="aspectFill"></image>
							<span class="search_tip">请输入店内商品名称进行搜索</span>
						</view>
						
						<view class="search_btn" @click="searchGoods(1)">
							搜索商品or跑腿下单
						</view>
					</view>
				</view>
				<!--内容 start-->
				<view class="list-view" 
				:style="[goodsList.length <= 0 ? {padding:'0 0 0 0'}:{papdding:'2rpx 8rpx 260rpx 8rpx'}]"
				>
					<goodsListInfo 
					:goods="goodsList" 
					:style="[goodsList.length <= 0 ? {display:'none'}:{display:'block'}]"></goodsListInfo>
				</view>
				<!--内容 end-->
				<!--购物车数量及金额-->
				<cartBottom 
				v-if="cart_number > 0 && isShowCart"
				:cart_number = "cart_number"
				:cart_money = "cart_money"
				></cartBottom>
			</template>
		</tuiSticky>
		
		<!--正在进行的订单-->
		<!-- <orderProgress></orderProgress> -->
		<!--底部导航-->
		<tabBar :pagePath="'/pages/index/index'"></tabBar>
	</view>
</template>
<script>
	import cgSwiper from '@/components/cg-swiper/cg-swiper.vue';
	import orderProgress from '@/components/order-progress/order_progress.vue'
	import tuiSticky from "@/components/better-sticky/better-sticky.vue"
	import goodsListInfo from '@/components/goods/goods-list-info.vue'
	import cartBottom from '@/components/goods/cart_bottom.vue'
	export default {
		components:{
		    cgSwiper,orderProgress,tuiSticky,goodsListInfo,cartBottom
		},
		data() {
			return {
				now_address:'',
				swiperList:[],
				swiperPage:0,
				inputText:"",//搜索框的值
				is_search_tip:true,
				scrollTop:0,
				goodsList:[],
				cart_number:0,
				cart_money:0,
				isShowSearchBtn:false,
				isShowCart:false,
				viewHeightTop:0, //列表距离顶部高度
			}
		},
		onLoad:function() {
			this.initSwiperData();
			
			
		},
		onShow() {
			
		},
		onReady() {
			this.$store.dispatch('getAddress')
		},
		mounted() {
		　　// 滚动条的获取
	    },
		created(){
			
		},
		//页面滚动执行方式
		onPageScroll(e) {
			this.scrollTop= e.scrollTop
			if(this.scrollTop >= this.viewHeightTop){
				this.isShowSearchBtn = true
				this.isShowCart		 = true
			}else{
				this.$refs.tuiSticky.init();
				this.$refs.tuiSticky.updateScrollChange();
				this.isShowSearchBtn = false
				this.isShowCart		 = false
			}
		},
		methods: {
			select_map(){
				let lat_lon = {lat:this.$store.state.txMap.latitude,lon:this.$store.state.txMap.lontitude}
				this.$store.dispatch('openMap',lat_lon)
			},
			
			clickItem:function(e){
				console.log(e)
			},
			defaultGoodsShow:function(flag){
				let that = this
				
				var query = wx.createSelectorQuery().in(that);
				query.selectViewport().scrollOffset()
				query.select(".list-view").boundingClientRect();
				query.exec(function (res) {
					console.log(res)
					if(flag == 1){
						var miss = res[0].scrollTop + res[1].top - 110 ;
					}else{
						var miss = res[0].scrollTop + res[1].top - 110 ;
					}
					console.log(miss)
					that.viewHeightTop = miss
					wx.pageScrollTo({
					  scrollTop: miss,
					  duration: 300
					});
				});
			
			},
			searchGoods:function(flag){
				let that = this 
				if(that.inputText){
					console.log('进行搜索商品API调用')
					//接口请求如果有商品进行商品列表展示，无商品则提示空页面
					if(true){
						this.searchGoodsList();
						this.defaultGoodsShow(flag)
					}else{
						
					}
				}else{
					console.log('请输入商品名称')
				}
			},
			initSwiperData(){
				this.swiperList = 	[
					{"id":1,"text":"测试标题1","img":"../../static/1.png"},
					{"id":2,"text":"测试标题2","img":"../../static/1.png"},
					{"id":3,"text":"测试标题3","img":"../../static/1.png"},
					{"id":4,"text":"测试标题4","img":"../../static/1.png"},
					{"id":5,"text":"测试标题5","img":"../../static/1.png"},
					{"id":6,"text":"测试标题6","img":"../../static/1.png"},
					{"id":7,"text":"测试标题7","img":"../../static/1.png"},
					{"id":8,"text":"测试标题8","img":"../../static/1.png"},
					{"id":9,"text":"测试标题9","img":"../../static/1.png"},
					{"id":10,"text":"测试标题10","img":"../../static/1.png"},
					{"id":11,"text":"测试标题9","img":"../../static/1.png"},
					{"id":12,"text":"测试标题10","img":"../../static/1.png"}
				];
				this.swiperPage	=	Math.ceil(this.swiperList.length / 6);
			},
			searchGoodsList:function(){
				this.goodsList	=	[
					{"id":1,"title":"网红牛油果4粒9.9","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题2","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题3","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题4","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题5","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题6","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题7","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题8","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题9","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题10","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题9","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"},
					{"id":1,"title":"测试标题10","img":"../../static/sg.png","littleTitle":"测试短标题","amount":23,"amountRemark":22,"label":"标签1"}
				]
			},
			getFocus (val) {
				let that = this
				that.set_search_tip();
			},
			getBlur(val){
				let that = this
				that.set_search_tip();
			},
			changeVal(val) {
				let that = this
				this.inputText = val.detail.value;
				that.set_search_tip();
			},
			set_search_tip:function(){
				if (this.inputText != '') {
					this.is_search_tip = false
				}else{
					this.is_search_tip = true
				}
			},
		},
		computed:{
			newAddress(){
				return this.$store.state.txMap.address
			}
		}
	}
</script>

